<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}

			#chart {
				background-color: #f6f6f6;
				width: 100%;
				max-width: 1000px;

				--stroke-length: 0;
			}

			#chart #line {
				stroke: #9F3AF0;
				stroke-dasharray: var(--stroke-length);
				stroke-dashoffset: var(--stroke-length);
			}

			.name, .caption {
				font-family: Helvetica;
				font-size: 4px;
				font-weight: bold;
				fill: #999;

				animation: .5s fade-in ease-in-out;
				animation-fill-mode: forwards;
			}

			.values {
				font-family: Helvetica;
				font-size: 3px;
			}

			@keyframes animate-line {
				from {
					stroke-dashoffset: var(--stroke-length);
				}
				to {
					stroke-dashoffset: 0;
				}
			}

			#chart.animate #line {
				animation: 3s animate-line linear;
				animation-fill-mode: forwards;
				animation-delay: .3s;
			}

			@keyframes zoom-in {
				from {
					transform: scale(0);
				}
				to {
					transform: scale(1);
				}
			}

			@keyframes fade-in {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}

			#chart .point {
				opacity: 0;
			}

			#chart.animate .point {
				animation: .5s fade-in ease-in-out, .5s zoom-in ease-in-out;
				animation-fill-mode: forwards;
				animation-delay: var(--delay);
			}

			#chart .values {
				opacity: 0;
			}

			#chart.animate .values {
				animation: .5s fade-in ease-in-out;
				animation-fill-mode: forwards;
				animation-delay: var(--delay);
			}

			.loading {
				font-family: Helvetica;
				font-size: 5px;
				fill: #999;

				transition: .25s opacity ease-in-out;
			}

			#chart.animate .loading {
				opacity: 0;
			}
		</style>
	</head>
	<body>
	<svg viewBox="0 0 200 100" id="chart">
		<g transform="translate(0, 100) scale(1, -1)" id="path-container">
			<path fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" id="line" />
		</g>

	</svg>
	</body>
</html>
